// ShowCard.js
import React, { Component } from 'react';
import Paper from 'material-ui/Paper';
import Avatar from 'material-ui/Avatar';
import FontIcon from 'material-ui/FontIcon';
import IconButton from 'material-ui/IconButton';
import { grey400} from 'material-ui/styles/colors';
import { CardActions, CardHeader, CardTitle, CardText, CardMedia } from 'material-ui/Card';

import CONFIG from '../../config';
import { moment } from '../Utils/Helper';
import { parseJSON, getMethod } from '../../redux/Helper';

export default class ShowCard extends Component {
  _setSignLines(startTime, endTime, address) {
    let arr = [startTime, endTime, address];
    for(var i = 0;i < arr.length;i++){
      if(arr[i] == '' || arr[i] == null || typeof(arr[i]) == undefined){
        arr.splice(i,1);
        i=i-1;
      }
    }
    if (arr.length == 3) {
      return 2;
    } else if (arr.length == 2) {
      return 4;
    } else {
      return 5;
    }
  }

  /**
   * 活动是否过期，未过期为true|false
   */
  _compareStartTime(startTime) {
    if (new Date() > new Date(startTime)) {
      return true;
    }

    return false;
  }

  del = (id, e) => {
    this.props.handleDelete(id, this.props.index);
    this.props.handleOpen();
  };

  render() {
    const {item, color500} = this.props;

    let cover = (
        <CardMedia
          className="col-xs-12 col-md-6"
          style={{
            cursor: 'pointer',
            paddingLeft: 0,
            paddingRight: 0
          }}
          overlay={this._compareStartTime(item.start_time) ? 
            <CardTitle subtitle="活动已过期" /> : <div></div>
          }
          overlayContentStyle={{padding: 0}}
          onClick={this.props.pushTo.bind(this, '/activity/show/' + item.id)}
        >
          <div className="col-xs-12 visible-sm visible-md visible-lg" style={{
            width: '100%',
            height: 360,
            background: 'url('+item.cover+')',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center',
            backgroundSize: 'cover'
          }}></div>
          <img className="visible-xs" src={item.cover} />
        </CardMedia>
    );

    let action = (
      <CardActions style={{display: 'flex', justifyContent: 'space-between'}}>
        {this.props.show ? '' : 
          <IconButton
            iconClassName="icon-delete"
            iconStyle={{color: color500}}
            tooltip={this.props.isJoin ? '取消加入' : '删除此活动'}
            tooltipPosition="top-right"
            onClick={this.del.bind(this, item.id)}
          />
        }
        
        <div>
          <span style={styles.span}>
          申请: {item.activity_apply_count}
          </span>
        </div>

        <div>
          <span style={styles.span}>
          已加入: {item.activity_join_count}
          </span>
        </div>

        <IconButton
          iconClassName="icon-open_in_new"
          iconStyle={{color: grey400}}
          style={{marginRight: 0}}
          tooltip="查看"
          tooltipPosition="top-left"
          onClick={this.props.pushTo.bind(this, '/activity/show/' + item.id)}
        />
      </CardActions>
    );

    let content = (
      <div 
        className="col-xs-12 col-md-6"
        style={{
          display: 'flex',
          flexDirection: 'column',
          padding: 0,
        }}
      >
        <CardHeader
          title={<b>{item.user_name}</b>}
          titleStyle={styles.title}
          avatar={<Avatar 
            style={styles.userImg} 
            src={item.user_img}
            size={45} 
          />}
          onClick={this.props.pushTo.bind(this, '/user/' + item.user_id)}
          style={{cursor: 'pointer'}}
        />

        <p 
          style={{
            margin: 0,
            paddingLeft: 16,
            paddingRight: 16,
            fontSize: 24,
            color: 'rgba(0, 0, 0, 0.870588)',
            display: 'block',
            whiteSpace:'nowrap',
            overflow:'hidden',
            textOverflow:'ellipsis',
            cursor: 'pointer'
          }}
          onClick={this.props.pushTo.bind(this, '/activity/show/' + item.id)}
        >
          {item.title}
        </p>

        <CardText style={{flex: 1}}> 
          <p>
            <FontIcon style={{fontSize: 14}} className="icon-today" />
            {moment(item.start_time).format('ll ah:mm')}
            {item.number_of_people ? 
              <span>{' 限'+item.number_of_people+'人'}</span>
            : ''}              
          </p>
          
          {item.end_time ? <p>
            <FontIcon style={{fontSize: 14}} className="icon-remove" />
            {moment(item.end_time).format('ll ah:mm')}
          </p> : ''}

          {item.address ? <p>
            <FontIcon style={{fontSize: 14}} className="icon-room" />
            {item.address}
          </p> : ''}

          <div style={{
            display: '-webkit-box',
            lineHeight: 1.428,
            overflow:'hidden',
            textOverflow:'ellipsis',
            WebkitLineClamp: this._setSignLines(item.start_time, item.end_time, item.address), // 2 4 5
            WebkitBoxOrient: 'vertical'
          }}>
            {item.details}
          </div>
        </CardText>

        {action}
      </div>
    );

  	return (
      <div style={{width: '100%'}}>
        <div style={{
          paddingLeft: '0.5rem',
          paddingRight: '0.5rem'
        }}>
          <Paper 
            style={{
              position: 'relative', 
              padding: 0, 
              maxWidth: 720,
            }} 
            zDepth={1} 
            className="card-line center-block"
          >
            <div className="row" style={{margin: 0}}>
              {cover}
              {content}
            </div>
          </Paper>
        </div>
      </div>
  	);
  }
};

const styles = {
  title: {
    display: 'table-cell',
    verticalAlign: 'middle',
    height: 48,
    fontSize: 15,
    color: 'rgba(0, 0, 0, 0.870588)'
  },
  userImg: {
    borderWidth: 2,
    borderStyle: 'solid',
    borderColor: '#fff'
  },
  span: {
    display: 'table-cell',
    verticalAlign: 'middle',
    height: 48,
    fontSize: 12,
    paddingLeft: 8,
    color: grey400
  }
}